<!--
 * @Author: 蔡继周
 * @Date: 2021-11-15 09:13:41
 * @LastEditTime : 2021-12-08 23:00:22
 * @LastEditors  : Shaquille.Cai
 * @Description: I have to do something...
 * @FilePath     : \\myBlog\\blogAdmin\\src\\components\\tableTep\\index.vue
-->
<template>
  <div style="min-width: 650px">
    <SearchMoudle :searchList="searchList" :searchForm="searchForm">
      <template v-slot:content>
        <slot name="content"></slot>
      </template>
    </SearchMoudle>
    <el-row class="row_group">
      <el-col :span="12">
        <slot name="businessHandle"></slot>
      </el-col>
      <el-col :span="12" class="config_group">
        <el-button type="primary" size="mini" @click="refreshData"
          >刷新</el-button
        >
        <el-popover placement="bottom-end" :width="100" trigger="click">
          <template #reference>
            <el-button type="primary" size="mini">密度</el-button>
          </template>
          <el-form>
            <RadioGroupMoudel
              :column="rowSizeConfig"
              v-model:model="rowSize"
            ></RadioGroupMoudel>
          </el-form>
        </el-popover>
        <el-popover placement="bottom-end" :width="100" trigger="click">
          <template #reference>
            <el-button type="primary" size="mini">列设置</el-button>
          </template>
          <el-form :model="ColumnSettingForm">
            <CheckboxMoudel
              :column="rowFormConfig"
              v-model:model="ColumnSettingForm"
            ></CheckboxMoudel>
          </el-form>
        </el-popover>
      </el-col>
    </el-row>
    <TableMoudle
      :tableDataList="tableDataList"
      :tableConfig="{ ...tableConfig, ...sizeConfig }"
      :tableHeader="tableHeaderComputed"
      :table-handle-list="tableHandleList"
      :currentPage="currentPage"
      :currentSize="currentSize"
    />
    <div class="table_pagination">
      <el-pagination
        v-if="true || isShowPagination"
        v-model:currentPage="currentPage"
        :page-sizes="pageSizesList"
        :page-size="currentSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="handleprevClick"
        @next-click="handlenextClick"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import SearchMoudle from "./SearchMoudle/index.vue";
import {
  defineComponent,
  reactive,
  ref,
  computed,
  toRefs,
  onMounted,
} from "vue";
import TableMoudle from "./TableMoudle/index.vue";

const sizeOption = [
  {
    // rowHeight: "00px",
    // cellHeight: "20px",
    cellPadding: "0px",
    headerCellHeight: "40px",
  },
  {
    rowHeight: "30px",
    // cellHeight: "40px",
    cellPadding: "8px",
    headerCellHeight: "55px",
  },
  {
    rowHeight: "60px",
    cellHeight: "60px",
    cellPadding: "8px",
    headerCellHeight: "55px",
  },
];

export default defineComponent({
  name: "tableTep",
  emits: [
    "changeHeaderList",
    "handleSelectionChange",
    "rowDblclickHandle",
    "rowClickHandle",
    "returnDataList",
  ],
  props: {
    tableConfig: {
      //表格设置
      type: Object,
      default: () => {
        return {};
      },
    },
    tableHeader: {
      //表头数组（原始）
      type: Array,
      default: () => [],
    },
    tableHandleList: {
      //表格操作数组
      type: Array,
      required: false,
      default: () => [],
    },
    searchList: {
      //搜索类型等基础设置
      type: Array,
      default: () => [],
    },
    searchForm: {
      //搜索form字段
      type: Object,
      default: () => {
        return {};
      },
    },
    //获取数据api
    getDataAsync: {
      type: Function,
    },
  },
  components: {
    SearchMoudle,
    TableMoudle,
  },

  setup(props, { emit }) {
    const getKepOptions = () => {
      return props.tableHeader.map((v) => {
        return {
          id: v.prop,
          name: v.label,
        };
      });
    };
    const currentPage = ref(1); //页码
    const currentSize = ref(10); //几条一页
    const total = ref(19); //总数
    const state = reactive({
      pageSizesList: [10, 20, 30, 40], //数量范围
      tableDataList: [], //表格数据
      rowFormConfig: {
        //列表行隐藏form条件及配置
        name: "ColumnSettingForm", //字段名
        type: "CheckboxMoudel", //类型
        required: false, // 必填
        trigger: ["blur"],
        definProps: {
          //默认属性
          disabled: false,
        },
        options: getKepOptions(), //列设置checkBox数据
        //改变header
        change: (val) => {
          changeHeaderList(val);
        },
      },
      tableHeaderComputed: [],
      ColumnSettingForm: props.tableHeader.map((v) => {
        return v.prop || null;
      }), //表头名数组
      rowSizeConfig: {
        name: "rowSize", //字段名
        type: "RadioGroupMoudel", //类型
        title: "",
        trigger: ["change"],
        required: false, // 必填
        options: [
          {
            value: 1,
            label: "small",
          },
          {
            value: 2,
            label: "middle",
          },
          {
            value: 3,
            label: "large",
          },
        ],
        change: (e) => {
          console.log(e, state.rowSize);
        },
      },
      rowSize: props.tableConfig.tableSize || 2,
    });
    state.tableHeaderComputed = props.tableHeader;

    const sizeConfig = computed(() => {
      return sizeOption[state.rowSize - 1];
    });

    /**
     * 改变当前的tableHeader
     */
    const changeHeaderList = (e) => {
      let res = [];
      props.tableHeader.forEach((v) => {
        e.forEach((z) => {
          if (v.prop === z) {
            res.push(v);
          }
        });
      });
      state.tableHeaderComputed = res;
    };
    /**
     * 获取数据
     */
    const refreshData = () => {
      return props
        .getDataAsync({
          ...props.searchForm,
          ...{
            pageNum: currentPage.value,
            pageSize: currentSize.value,
          },
        })
        .then((res) => {
          console.log({
            ...props.searchForm,
            ...{
              pageNum: currentPage.value,
              pageSize: currentSize.value,
            },
          });
          console.log(res);
          total.value = res.page.total;
          state.tableDataList = res.list;
        })
        .then(() => {
          emit("returnDataList", state.tableDataList);
        });
    };
    /**
     * 页码变化，改变查询条件，刷新数据
     */
    const handleSizeChange = (val) => {
      currentSize.value = val;
      refreshData();
    };
    /**
     * 页码变化，改变查询条件，刷新数据
     */
    const handleCurrentChange = (val) => {
      refreshData();
    };
    /**
     * 分页上一页图标点击
     */
    const handleprevClick = (val) => {
      console.log("分页上一页图标点击====>", val);
    };
    /**
     * 分页下一页图标点击
     */
    const handlenextClick = (val) => {
      console.log("分页下一页图标点击====>", val);
    };
    /**
     * 是否显示分页，总数小于最小范围不显示
     */
    const isShowPagination = computed(() => {
      return state.pageSizesList[0] < total.value;
    });
    onMounted(() => {
      refreshData();
    });
    return {
      refreshData,
      handleSizeChange,
      handleCurrentChange,
      handleprevClick,
      handlenextClick,
      currentPage,
      total,
      currentSize,
      isShowPagination,
      sizeConfig,
      ...toRefs(state),
    };
  },
});
</script>
<style lang="scss" scoped>
.table_pagination {
  width: 100%;
  padding: 0 25px;
  display: flex;
  justify-content: flex-end;
}
.row_group {
  padding: 0 33px;
}
.handle_group {
}
.config_group {
  display: flex;
  justify-content: flex-end;
}
</style>